<template>
  <div class="list-table-box mt12">
    <div class="list-caption f16" style="padding-left: 12px">稿件列表</div>

    <CommonTablePage
      :loading="tableLoading"
      :columns="columns"
      :tableData="tableData"
      :total="pagination.total"
      :hide-page="true"
      @on-sort-change="handleTableSort"
    ></CommonTablePage>
  </div>
</template>

<script>
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
// request
import { getSpreadUnitList } from '@/api/manageEnd/manuscript/manuRank.js'
// util
import { createCommonPagination } from '@/utils/service.js'
import { createColumns } from './service/spreadUnit'
import $bus from '@/utils/bus.js'
export default {
  name: 'SpreadUnitList',

  components: { CommonTablePage },

  props: {
    formData: { type: Object },
  },

  data() {
    return {
      tableLoading: false,
      columns: createColumns(this),
      tableData: [],
      orderField: 'articleCount',
      orderDesc: true,
      pagination: createCommonPagination(),
    }
  },

  methods: {
    handleTableSort({ column, key, order }) {
      // console.log(123, column, key, order)
      if (order === 'normal') return
      this.orderDesc = order === 'desc'
      this.orderField = key
      this.handleFormSubmit(this.formData)
    },

    handleFormSubmit(params) {
      const p = { ...params }
      p.desc = this.orderDesc
      p.orderField = this.orderField
      this.getSpreadUnitList(p)
    },

    async getSpreadUnitList(params) {
      this.tableLoading = true
      const res = await getSpreadUnitList(params)
      // console.log('getSpreadUnitList', res)
      const data = res.data || {}
      this.tableData = Object.freeze(data.data || [])
      this.tableLoading = false
    },
  },

  mounted() {
    this.handleFormSubmit({ ...this.formData })
    $bus.$on('on-manu-rank-list', this.handleFormSubmit)
  },

  beforeDestroy() {
    $bus.$off()
  },
}
</script>

<style lang="less" scoped></style>
